<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>商家入驻 - 平台商家申请</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f7f9fc;
            color: #333;
            line-height: 1.6;
            padding-bottom: 40px;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #4a6bff, #7b4cff);
            color: white;
            padding: 40px 30px 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: -100px;
            right: -80px;
        }
        
        header::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            bottom: -80px;
            left: -60px;
        }
        
        h1 {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .subtitle {
            font-size: 26px;
            opacity: 0.9;
            font-weight: 300;
            position: relative;
            z-index: 2;
        }
        
        /* 步骤指示器 */
        .steps {
            display: flex;
            justify-content: space-between;
            padding: 0 50px;
            margin-top: -20px;
            position: relative;
            z-index: 10;
        }
        
        .step {
            background: white;
            border-radius: 20px;
            padding: 20px 15px;
            width: 170px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            position: relative;
            z-index: 2;
        }
        
        .step.active {
            background: #4a6bff;
            color: white;
        }
        
        .step-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .step-title {
            font-size: 24px;
            font-weight: 500;
        }
        
        /* 表单区域 */
        .form-container {
            padding: 50px 40px 40px;
        }
        
        .form-section {
            margin-bottom: 50px;
            padding: 30px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #eee;
        }
        
        .section-title {
            font-size: 32px;
            color: #4a6bff;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f4ff;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 15px;
            background: #f0f4ff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 商家类型选择 */
        .merchant-types {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 20px;
        }
        
        .merchant-type {
            flex: 1;
            min-width: 200px;
            border: 2px solid #e6e9f0;
            border-radius: 20px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .merchant-type:hover {
            transform: translateY(-5px);
            border-color: #4a6bff;
        }
        
        .merchant-type.selected {
            border-color: #4a6bff;
            background: #f0f4ff;
        }
        
        .merchant-type.selected::after {
            content: "✓";
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background: #4a6bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .type-icon {
            font-size: 50px;
            margin-bottom: 20px;
            color: #4a6bff;
        }
        
        .type-name {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .type-desc {
            font-size: 24px;
            color: #666;
        }
        
        /* 表单元素样式 */
        .form-group {
            margin-bottom: 40px;
        }
        
        label {
            display: block;
            font-size: 28px;
            margin-bottom: 15px;
            font-weight: 500;
            color: #444;
        }
        
        .required::after {
            content: " *";
            color: #ff4d4f;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 25px;
            font-size: 26px;
            border: 2px solid #e6e9f0;
            border-radius: 15px;
            background: #fafbff;
            transition: border-color 0.3s;
        }
        
        input:focus, select:focus, textarea:focus {
            border-color: #4a6bff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(74, 107, 255, 0.2);
        }
        
        textarea {
            min-height: 200px;
            resize: vertical;
        }
        
        /* 文件上传 */
        .file-upload {
            border: 2px dashed #e6e9f0;
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            background: #fafbff;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .file-upload:hover {
            border-color: #4a6bff;
            background: #f0f4ff;
        }
        
        .file-upload i {
            font-size: 50px;
            color: #4a6bff;
            margin-bottom: 20px;
        }
        
        .file-text {
            font-size: 26px;
            color: #666;
        }
        
        .file-hint {
            font-size: 22px;
            color: #999;
            margin-top: 15px;
        }
        
        /* 押金说明 */
        .deposit-info {
            background: #f0f4ff;
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
        }
        
        .deposit-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #4a6bff;
        }
        
        .deposit-content {
            font-size: 24px;
            line-height: 1.8;
        }
        
        .deposit-content li {
            margin-bottom: 10px;
            margin-left: 30px;
        }
        
        /* 提交按钮 */
        .submit-btn {
            display: block;
            width: 100%;
            padding: 30px;
            background: linear-gradient(135deg, #4a6bff, #7b4cff);
            color: white;
            font-size: 32px;
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(74, 107, 255, 0.4);
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(74, 107, 255, 0.6);
        }
        
        .submit-btn:active {
            transform: translateY(0);
        }
        
        /* 底部信息 */
        footer {
            text-align: center;
            padding: 30px;
            color: #999;
            font-size: 24px;
            margin-top: 20px;
        }
        
        /* 响应式调整 */
        @media (max-width: 750px) {
            .container {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>成为平台商家</h1>
            <p class="subtitle">开启您的商业之旅，共享平台资源</p>
            
            <div class="steps">
                <div class="step active">
                    <div class="step-icon"><i class="fas fa-user-tie"></i></div>
                    <div class="step-title">选择类型</div>
                </div>
                <div class="step">
                    <div class="step-icon"><i class="fas fa-file-alt"></i></div>
                    <div class="step-title">填写资料</div>
                </div>
                <div class="step">
                    <div class="step-icon"><i class="fas fa-check-circle"></i></div>
                    <div class="step-title">完成提交</div>
                </div>
            </div>
        </header>
        
        <div class="form-container">
            <div class="form-section">
                <h2 class="section-title"><i class="fas fa-store"></i> 选择商家类型</h2>
                
                <div class="merchant-types">
                    <div class="merchant-type" data-type="service">
                        <div class="type-icon"><i class="fas fa-concierge-bell"></i></div>
                        <div class="type-name">服务商</div>
                        <div class="type-desc">提供专业服务解决方案</div>
                    </div>
                    
                    <div class="merchant-type selected" data-type="training">
                        <div class="type-icon"><i class="fas fa-chalkboard-teacher"></i></div>
                        <div class="type-name">培训商</div>
                        <div class="type-desc">提供专业培训与指导</div>
                    </div>
                    
                    <div class="merchant-type" data-type="heritage">
                        <div class="type-icon"><i class="fas fa-hands-helping"></i></div>
                        <div class="type-name">传承商</div>
                        <div class="type-desc">传统文化与技艺传承</div>
                    </div>
                    
                    <div class="merchant-type" data-type="supplier">
                        <div class="type-icon"><i class="fas fa-truck-loading"></i></div>
                        <div class="type-name">供应商</div>
                        <div class="type-desc">提供优质产品与货源</div>
                    </div>
                </div>
            </div>
            
            <div class="form-section">
                <h2 class="section-title"><i class="fas fa-info-circle"></i> 商家信息</h2>
                
                <div class="form-group">
                    <label class="required">选择行业</label>
                    <select id="industry">
                        <option value="">请选择所属行业</option>
                        <option value="education">教育培训</option>
                        <option value="tech">科技创新</option>
                        <option value="culture">文化传承</option>
                        <option value="health">健康医疗</option>
                        <option value="retail">零售电商</option>
                        <option value="other">其他行业</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="required">服务范围</label>
                    <textarea placeholder="请详细描述您的服务范围、服务区域及服务内容"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="required">上传营业执照</label>
                    <div class="file-upload" id="licenseUpload">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <div class="file-text">点击上传营业执照</div>
                        <div class="file-hint">支持 JPG、PNG 格式，大小不超过 5MB</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="required">上传身份证</label>
                    <div class="file-upload">
                        <i class="fas fa-id-card"></i>
                        <div class="file-text">点击上传身份证正反面</div>
                        <div class="file-hint">请确保身份证信息清晰可见</div>
                    </div>
                </div>
                
                <div class="deposit-info">
                    <div class="deposit-title">押金规则说明</div>
                    <div class="deposit-content">
                        <ul>
                            <li>需缴纳平台保证金：<strong>¥5,000</strong></li>
                            <li>审核不通过时，押金将在3-5个工作日内原路退回</li>
                            <li>合作期间如无违规行为，保证金在退出平台时全额退还</li>
                            <li>保证金用于保障平台用户权益和服务质量</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <button class="submit-btn">提交审核</button>
        </div>
        
        <footer>
            <p>© 2023 平台商家入驻中心 | 客服电话: 400-888-8888</p>
        </footer>
    </div>

    <script>
        // 商家类型选择交互
        const merchantTypes = document.querySelectorAll('.merchant-type');
        merchantTypes.forEach(type => {
            type.addEventListener('click', function() {
                merchantTypes.forEach(t => t.classList.remove('selected'));
                this.classList.add('selected');
            });
        });
        
        // 文件上传交互
        const licenseUpload = document.getElementById('licenseUpload');
        licenseUpload.addEventListener('click', function() {
            // 在实际应用中，这里会触发文件选择对话框
            this.innerHTML = `
                <i class="fas fa-file-image" style="color:#52c41a;"></i>
                <div class="file-text">营业执照已上传</div>
                <div class="file-hint">点击可重新上传</div>
            `;
        });
        
        // 表单提交处理
        document.querySelector('.submit-btn').addEventListener('click', function() {
            const selectedType = document.querySelector('.merchant-type.selected').dataset.type;
            const industry = document.getElementById('industry').value;
            
            if(!industry) {
                alert('请选择所属行业');
                return;
            }
            
            // 表单验证通过，显示成功消息
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
            this.disabled = true;
            
            setTimeout(() => {
                alert('提交成功！\n您的申请已进入审核流程，我们将在3-5个工作日内完成审核。');
                this.innerHTML = '提交审核';
                this.disabled = false;
            }, 1500);
        });
    </script>
</body>
</html>